<template>
  <div class="issue flex column grow">
    <yn-common-title name="股友问答">
      <template slot="icon">
        <img
          :src="PIC_URL + '/tlbypcWeb/home/gywd.png'"
          @error="
            $fn.imageHandler(path + '/client/home/images/gywd.png', $event)
          "
        />
      </template>
    </yn-common-title>
    <div class="contents">
      <div class="items flex column">
        <div
          class="item flex column shrink"
          v-for="(item, i) in list"
          :key="i"
          @click="link(item.id)"
        >
          <div class="question flex">
            <div class="icon">
              <img
                :src="PIC_URL + '/tlbypcWeb/home/q.png'"
                @error="
                  $fn.imageHandler(path + '/client/home/images/q.png', $event)
                "
              />
            </div>
            <span class="grow txt">{{ item.question }}</span>
            <span class="grow time">{{ item.createTime }}</span>
          </div>
          <div class="answer flex">
            <div class="icon">
              <img
                :src="PIC_URL + '/tlbypcWeb/home/a.png'"
                @error="
                  $fn.imageHandler(path + '/client/home/images/a.png', $event)
                "
              />
            </div>
            <div class="txt grow" v-html="item.answer"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { CLIENT } from "@/common/const";
import title from "../common/title";
import { getQuestion } from "../../api/index";
import dayjs from "dayjs";

export default {
  data() {
    return {
      list: [],
      path: CLIENT,
    };
  },
  components: { "yn-common-title": title },
  mounted() {
    this.getQuestion();
  },
  methods: {
    link(id) {
      const url = `${CLIENT}/client/toAskstockDetail.htm?id=${id}`;
      window.prompt(
        "",
        `up://["user.info",${Date.now()},{"type":"link","data":{"url":"${url}","title":"股友问答"}}]`
      );
    },
    async getQuestion() {
      await getQuestion({ pageSize: 20 }).then((back) => {
        if (back.status == 1) {
          let list = back.data.list;
          this.list = list.map((item) => {
            item.question = item.question.substring(0, 20);
            item.answer = item.answer.replace(/<[^>]+>/g, "");
            item.createTime = dayjs(item.createTime).format("MM-DD HH:mm");

            return item;
          });
        }
      });
    },
  },
};
</script>
<style>
.contents .item .txt * {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>
<style scoped lang="scss">
.issue {
  background: #090910;
  border: 1px solid #25262a;
}
.contents {
  overflow: auto;
}
.item {
  padding: 16px 40px;
  border-bottom: 1px solid #25262a;
  font-size: 18px;
  .icon {
    margin-right: 10px;
  }
  .question {
    color: #bcbfc4;
    margin-bottom: 15px;
    line-height: 24px;
    .txt {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .time {
      white-space: nowrap;
      text-align: right;
    }
  }
  .answer {
    color: #bcbfc4;
    overflow: hidden;
    line-height: 24px;
    white-space: nowrap;
    .icon {
      position: relative;
      top: 3px;
    }
    .txt {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
}
.item:hover {
  background: #323337;
  cursor: pointer;
}
</style>
